<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input class="user" type="text">
    <br>
    <input class="pwd" type="text">
    <br>
    <button>登陆</button>

    <script>

        const oBtn = document.querySelector('button') ;
        const oUser = document.querySelector('.user') ;
        const oPwd = document.querySelector('.pwd') ;

        const cookies = document.cookie ;    // username=yy; userpwd=123
        let arr = cookies.split('; ');
        console.log(arr);

        arr = arr.map(v => {
            let arr = v.split('=');
            return {
                name: arr[0],
                content: arr[1]
            }
        })

        console.log(arr);


      






        oBtn.onclick = function() {
            // 获取用户名和密码
            const user = oUser.value ;
            const pwd = oPwd.value ;

            // 判断用户名是否存在  --- 如果用户名不存在就会得到空数组  如果存在，就会得到数组里面嵌套一个对象
            let res = arr.filter( v => v.name === 'YYDS_' + user) ;
            // 得到对象
            let resObj = res[0] ;
            console.log(resObj);
            if(resObj) {
                // 判断密码
                if(resObj.content === pwd) {
                    alert('ok') ;
                    // 需要存储是哪个账号登录的
                    document.cookie = 'login_user=' + user ;
                    location.href = './16用户列表.html'
                } else {
                    alert('用户名或者密码错误');
                }
            } else {
                alert('用户名不存在') ;
            }
       

        }

    </script>
    
</body>
</html>